<template>
  <div class="logs-container">
    <el-card>
      <div class="header">
        <h2>操作日志</h2>
        <div class="filter-controls">
          <el-select v-model="filter.type" placeholder="操作类型" clearable>
            <el-option label="新增" value="create" />
            <el-option label="修改" value="update" />
            <el-option label="删除" value="delete" />
            <el-option label="导入" value="import" />
            <el-option label="导出" value="export" />
          </el-select>

          <el-select v-model="filter.module" placeholder="操作模块" clearable>
            <el-option label="人事管理" value="personnel" />
            <el-option label="招聘管理" value="recruitment" />
            <el-option label="组织架构" value="organization" />
            <el-option label="权限管理" value="permission" />
          </el-select>

          <el-date-picker
              v-model="filter.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />

          <el-button type="primary" icon="el-icon-search" @click="searchLogs">查询</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <el-table :data="logList" style="width: 100%">
        <el-table-column prop="operator" label="操作人" width="150" />
        <el-table-column prop="module" label="操作模块" width="150" />
        <el-table-column prop="type" label="操作类型" width="120">
          <template #default="scope">
            <el-tag :type="getLogTypeColor(scope.row.type)">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="操作内容" min-width="300" />
        <el-table-column prop="time" label="操作时间" width="180" />
        <el-table-column prop="ip" label="IP地址" width="150" />
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalLogs"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Logs',
  setup() {
    const filter = reactive({
      type: '',
      module: '',
      dateRange: []
    })

    const logList = ref([
      {
        id: 1,
        operator: '管理员',
        module: '人事管理',
        type: '新增',
        content: '新增员工: 张三 (EMP10001)',
        time: '2023-05-10 14:30:25',
        ip: '192.168.1.100'
      },
      {
        id: 2,
        operator: '李经理',
        module: '招聘管理',
        type: '录用',
        content: '录用候选人: 王五 (应聘职位: 前端开发)',
        time: '2023-05-09 10:15:42',
        ip: '192.168.1.101'
      },
      {
        id: 3,
        operator: '张主管',
        module: '组织架构',
        type: '修改',
        content: '修改部门: 技术部 -> 前端组',
        time: '2023-05-08 16:20:18',
        ip: '192.168.1.102'
      },
      {
        id: 4,
        operator: '管理员',
        module: '权限管理',
        type: '更新',
        content: '更新权限: 技术部 -> 前端组',
        time: '2023-05-07 09:45:33',
        ip: '192.168.1.100'
      },
      {
        id: 5,
        operator: '赵助理',
        module: '人事管理',
        type: '导入',
        content: '导入员工数据: 成功导入25条记录',
        time: '2023-05-06 14:12:05',
        ip: '192.168.1.103'
      }
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalLogs = ref(5)

    const getLogTypeColor = (type) => {
      const map = {
        '新增': 'success',
        '修改': 'warning',
        '删除': 'danger',
        '导入': 'primary',
        '导出': 'info',
        '录用': 'success',
        '淘汰': 'danger',
        '更新': 'warning'
      }
      return map[type] || ''
    }

    const searchLogs = () => {
      ElMessage.success('日志查询成功')
      // 实际项目中这里会调用API
    }

    const handlePageChange = (page) => {
      currentPage.value = page
      // 实际项目中根据页码加载数据
    }

    return {
      filter,
      logList,
      currentPage,
      pageSize,
      totalLogs,
      getLogTypeColor,
      searchLogs,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.logs-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-controls {
  display: flex;
  gap: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>